{extend name="public:base" /}

{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div id="main" style="width: 100%; height:600px;">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


{/block}

{block name="js"}
<script src="__ADMIN__/js/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var time_list = `{$time_list}` ? JSON.parse(`{$time_list}`) : [];
    var user_list = `{$user_list}` ? JSON.parse(`{$user_list}`) : [];

    var option = {
        xAxis: {
            name: '注册日期',
            type: 'category',
            data: time_list
        },
        yAxis: {
            name: '注册数量',
            type: 'value'
        },
        series: [
            {
                data: user_list,
                type: 'line',
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ],
        tooltip: {
            type: 'cross',
            trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
            backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
            borderRadius: 8,           // 提示边框圆角，单位px，默认为4
            padding: 10,                // 提示内边距，单位px，默认各方向内边距为5，
            textStyle: {
                color: '#fff'
            },
            valueFormatter: (value) => '陪诊员注册数量' + value + '个'
        },
    };

    myChart.setOption(option);
</script>
{/block}